<template>
  <div class="container">
    <div class="group-list">
      <el-table :data="tableData" size="small">
        <el-table-column prop="title" label="卡组" width="200px"/>
        <el-table-column prop="count" label="次数"/>
        <el-table-column fixed="right" label="操作" min-width="40">
          <el-dropdown>
            <el-button size="small" :icon="Tools" circle />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>添加</el-dropdown-item>
                <el-dropdown-item>删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-button class="add-group-btn" size="small" type="primary" @click="addGroupVisible = true">添加卡组</el-button>
    </div>

<!--    添加卡组弹窗-->
    <el-dialog
        v-model="addGroupVisible"
        title="添加卡组"
        width="380"
        class="add-group-modal"
    >
      <el-form
          ref="addGroupFormRef"
          :model="addGroupForm"
          label-width="auto"
      >
        <el-form-item label="名称" :rules="[
            {
              required: true,
              message:'名称不能为空'
            }
        ]">
          <el-input size="small" v-model="addGroupForm.name"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-form-item >
            <el-button size="small" type="primary" @click="addGroupSubmit(addGroupFormRef)">
              提交
            </el-button>
          </el-form-item>

        </div>
      </template>


    </el-dialog>
  </div>

</template>
<script setup lang="ts">
import { ref } from 'vue'
import {Tools} from '@element-plus/icons-vue';
import type { FormInstance } from 'element-plus'

const addGroupFormRef = ref<FormInstance>()

const addGroupVisible = ref(false)
const addGroupForm = reactive({
  name:''
})

const tableData = [
  {
    title: '英语复习',
    count: 10,
  },
  {
    title: '英语复习',
    count: 10,
  },
  {
    title: '英语复习',
    count: 10,
  },
  {
    title: '英语复习',
    count: 10,
  },
  {
    title: '英语复习',
    count: 10,
  },
  {
    title: '英语复习',
    count: 10,
  },
  {
    title: '英语复习',
    count: 10,
  },
  {
    title: '英语复习',
    count: 10,
  },
  {
    title: '英语复习',
    count: 10,
  },
  {
    title: '英语复习',
    count: 10,
  },
]

function addGroupSubmit(formEl: FormInstance | undefined) {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
    }
  })
}

</script>
<style scoped lang="scss">
  .container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .group-list{
      width: 94%;
      margin: 10px 0;
      padding: 1px;
      border: 2px solid #409eff;
      border-radius: 5px;
    }
    .footer{
      //position: fixed;
      //bottom: 0;
      //margin-bottom: 10px;
      height: 50px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

    }

    .add-group-modal{
      .dialog-footer {
        display: flex;
        justify-content: center;
      }
    }
  }

</style>